<template>
  <view class="wrap" :style="{height:statuHeight+'px'}">
     <top-tab tabTitle="密码更改" @backClick="backClick" backColor="#5B2177"></top-tab>
		 <view class="main">
			 <view class="item-list-input">
			 	<view class="title">手机号码</view>
			 	<input 
			 		maxlength="8"
			 		v-model="userData.account" 
			 		placeholder-style="font-size: 24rpx;color: #999999;"
			 	/>
			 </view>
			<view class="item-list-input">
				<view class="title">当前密码</view>
				<input 
					maxlength="8"
					@input="inputCode"
					placeholder="请输入昵称" 
					v-model="fromData.oldPwd" 
					placeholder-style="font-size: 24rpx;color: #999999;"
				/>
			</view>
			<view class="item-list-input">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" v-model="fromData.smsVerifyCode" placeholder-style="font-size: 24rpx;color: #999999;"/>
				<view class="open-code" @click="getSmsVerify" v-if="showbtn">{{code_ts}}</view>
				<view class="code-name" v-else style="color: #999999;">{{code_ts}}</view>
			</view>
			<view class="item-list-input">
				<view class="title">登录密码</view>
				<input
				  @input="inputCode"
					placeholder="请输入6-8位密码" 
					maxlength="8"
					v-model="fromData.newPwd"
					placeholder-style="font-size: 24rpx;color: #999999;"
				/>
			</view>
			<view class="item-list-input">
				<view class="title">确认密码</view>
				<input 
					@input="inputCode"
					maxlength="8"
					placeholder="请再次输入密码" 
					v-model="password" 
					placeholder-style="font-size: 24rpx;color: #999999;"
				/>
			</view>
		</view>
		<view class="footer-btn" @click="affirm">确定更改</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
	import  md5  from '@/components/md5/md5.js' 
  export default {
		components: { topTab },
    data() {
      return {
				code_ts: '发送验证码', //倒计时提示文字
				sec: 60, // 倒计时秒数
				showbtn: true, // 展示获取验证码或倒计时按钮判断
				fromSms: { // 发短信参数
					mobile: "",
					mobileCountry: "CN",
					type: "REGISTER"
				},
				userData: uni.getStorageSync('user_key'), // 获取个人信息
				password: '',
				fromData:{
					newPwd: "", // 新密码
					oldPwd: "", // 原密码
					smsVerifyCode: "" // 短信验证码
				},
				statuHeight: uni.getSystemInfoSync().screenHeight,
			}
    },
  onShow() {},
  methods: {
		// 确认更改
		async affirm() {
			if(!this.verify()) return false
			if(this.password !== this.fromData.newPwd) {
				uni.showToast({title: "俩次输入的密码不一致", icon:'none'})
				return false
			}
			const parame = {
				newPwd: md5(this.fromData.newPwd),
				oldPwd: md5(this.fromData.oldPwd),
				smsVerifyCode: this.fromData.smsVerifyCode
			}
			const res = await $POST("/boke-user/user/modifyPwd",parame)
			this.fromData.newPwd = ''
			this.fromData.oldPwd = ''
			this.fromData.smsVerifyCode = ''
			this.password = ''
			uni.showToast({title: "修改成功", icon:'none'})
			uni.navigateBack({})
		},
		// 验证
		verify() {
			if (!this.fromData.oldPwd) {
				uni.showToast({title: "请输入当前密码", icon:'none'})
				return false
			}
			if (!this.fromData.smsVerifyCode) {
				uni.showToast({title: "请输入验证码", icon:'none'})
				return false
			}
			if (!this.fromData.newPwd || !this.password) {
				uni.showToast({title: "请输入密码", icon:'none'})
				return false
			}
			if (this.fromData.newPwd.length < 6 || this.password.length < 6) {
				uni.showToast({title: "密码长度不能少于6位", icon:'none'})
				return false
			}
			return true
		},
		// 验证码inpout事件
		inputCode(e) {
			if(!(/^[a-zA-Z0-9_]{1,}$/.test(e.detail.value))){
				uni.showToast({title: "只能输入字母与数字", icon:'none'})
				return false
			}
		},
		// 获取短信验证码
		getSmsVerify() {
			if (!this.userData.account) {
				uni.showToast({title: "手机号码错误", icon:'none'})
				return false; 
			}
			this.getyzcode()
			this.fromSms.mobile = this.userData.account
		 $GET('/boke-user/sms/changeSendSmsFlag',{sendSms:"N"}).then(res => {
			  $POST('/boke-user/sms/sendSms',this.fromSms).then(res => {
					this.fromData.smsVerifyCode = "8888"
				})
		 })	
		},
		// 60秒倒计时
		getyzcode () {
		  let timer = setInterval(() => {
				this.sec = this.sec-1
				this.code_ts = this.sec + 'S后重试'
				this.showbtn = false
				if (this.sec === 0) {
						clearInterval(timer)
						this.sec = 60
						this.code_ts = "获取验证码"
						this.showbtn = true
				}
			}, 1000)
		},
		// 跳页面
		jump(path) {
			uni.navigateTo({
				url: path
			})
		},
		// 返回
		backClick() {
			uni.switchTab({
			   url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #F2F2F2;	
	}
	.main{
		.item-list-input{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 0rpx 25rpx;
			margin-top: 35rpx;
			height: 100rpx;
			line-height: 100rpx;
			.title{
				width: 140rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-right: 36rpx;
			}
			input{
				height: 100rpx;
				line-height: 100rpx;
			}
			.open-code{
				flex: 1;
				text-align: right;
				padding-right: 25rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #B43CEC;
			}
		}
		.item-list-radio{
			.uni-list-cell{
				margin-right: 67rpx;
				/deep/ .uni-radio-input {
					width: 24rpx !important;
					height: 24rpx !important;
					background:#FFFFFF !important;
				}
				/deep/ .uni-radio-input-checked{
					border: 1px solid #7F2EE1 !important;
				}
				/deep/ .uni-radio-input-checked:before {
				    font: normal normal normal 14px/1 uni;
				    content: "\EA08";
				    color: #7F2EE1 !important;
				    font-size: 10px;
				    position: absolute;
				    top: 50%;
				    left: 50%;
				    transform: translate(-50%,-48%) scale(.73);
				    -webkit-transform: translate(-50%,-48%) scale(.7);
				}
			}
		}
	}
	.footer-btn{
		width: 540rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #B83DF1, #852CAE);
		border-radius: 44rpx;
		line-height: 44px;
		text-align: center;
		margin: auto;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
</style>
